<template>
  <view class="pop-refund-choose-reason">
    <u-popup
      ref="store_cart_pop"
      bgColor="#ffffff"
      :show="show_pop"
      mode="bottom"
      :closeOnClickOverlay="true"
      round="30"
      @close="onclose"
      @open="onopen">
      <view class="info-modal-wrap">
        <view class="info-modal-inner">
          <view class="modal-head">
            <view class="title-box">选择售后原因</view>
          </view>

          <view class="modal-ctx">
            <scroll-view
              scroll-y
              scroll-with-animation
              class="scroll-container">
              <view class="select-wrap">
                <view class="select-list">
                  <view
                    class="select-item flex-between"
                    v-for="(item, index) in refund_reasons"
                    :key="index"
                    @click="toggleReason(item)">
                    <view class="title">
                      {{ item.title }}
                    </view>
                    <view class="btn-box flex-center">
                      <image
                        v-if="refund_select == item.title"
                        src="@/static/image/radio1.png"
                        mode=""></image>
                      <!-- <image v-else src="@/static/common/radio0.png" mode=""></image> -->
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>

          <view class="modal-foot">
            <view class="footer-wrap">
              <view class="btns">
                <view class="btn flex-center" @click="doConfirm()">确定</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      show_pop: true,
      refund_select: "",
    };
  },
  computed: {
    refund_reasons() {
      let str = this.vuex_config.tuihuanReason;
      let arr = [];
      try {
        arr = JSON.parse(str) || [];
      } catch (e) {
        //TODO handle the exception
      }
      return arr;
    },
  },
  watch: {},
  methods: {
    init() {
      this.show_pop = true;
    },
    onclose() {
      this.show_pop = false;
    },
    onopen() {},
    toggleReason(item) {
      this.refund_select = item.title;
    },
    doConfirm() {
      if (!this.refund_select) {
        this.$alert("请选择售后原因");
        return;
      }
      this.$emit("confirm", this.refund_select);
      this.show_pop = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.pop-refund-choose-reason {
  position: relative;
  z-index: 1000;
}

.info-modal-wrap {
  width: 574rpx;
  width: 660rpx;
  width: 100%;
  position: relative;
  text-align: left;
  padding-bottom: 0;
  // padding-bottom: calc(64rpx + constant(safe-area-inset-bottom));
  // padding-bottom: calc(64rpx + env(safe-area-inset-bottom));

  .info-modal-inner {
    border-radius: 16rpx;
    overflow: hidden;
    width: 100%;
    padding: 0 0;
    padding-bottom: 0;
    min-height: 400rpx;
    background: #ffffff;
    background: #f6fafd;
  }
}

.modal-head {
  // border: 1rpx solid #DDDDDD;
  padding-right: 0;

  .title-box {
    padding: 24rpx 40rpx 20rpx;
    text-align: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
  }
}

.modal-ctx {
  width: 100%;
  background: #f5f7f9;
  padding: 24rpx 32rpx;
  min-height: 200rpx;
  padding-bottom: 30rpx;
}

.scroll-container {
  max-height: calc(100vh - 600rpx);
  background: #fff;
}

.select-list {
  .select-item {
    min-height: 88rpx;
    padding: 12rpx 24rpx;

    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
    }

    .btn-box {
      width: 34rpx;
      height: 34rpx;
      border: 1rpx solid #ebeef5;
      border-radius: 50%;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.footer-wrap {
  padding: 20rpx;

  .safe-fixed-bottom {
    position: relative;
  }

  .btns {
    .btn {
      flex: 1;
      width: 100%;
      height: 80rpx;
      background: #f49c0d;
      border-radius: 64rpx 64rpx 64rpx 64rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
}
</style>
